<template>
  <div class="tab-panel">
    <!--工具栏-->
    <el-form ref="query" :inline="true" :model="query" size="small" class="demo-form-inline" label-position="right">
      <el-form-item label="关键词:">
        <el-input
          v-model="query.keywords"
          placeholder="手机号/微信昵称"
          clearable
          class="filter-item"
          @keyup.enter.native="toQuery"
        />
      </el-form-item>
      <el-form-item label="订单日期:">
        <el-date-picker
          v-model="query.time"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd HH:mm"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          style="width:360px"/>
      </el-form-item>
      <el-form-item label="订单号:">
        <el-input
          v-model="query.order_no"
          placeholder="订单号"
          clearable
          class="filter-item"
          @keyup.enter.native="toQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          class="filter-item"
          size="mini"
          icon="el-icon-refresh"
          @click="reset">重置</el-button>
        <el-button
          class="filter-item"
          size="mini"
          type="primary"
          icon="el-icon-search"
          @click="toQuery"
        >查询</el-button>
      </el-form-item>

    </el-form>
    <!-- 操作栏 -->
    <div class="operate-container">
      <div />
      <div>
        <el-button
          :loading="exportSearchLoading"
          class="filter-item"
          type="primary"
          size="mini"
          @click="exportSearch"
        >导出（查询）</el-button>
        <el-button
          :loading="exportCheckedLoading"
          :disabled="$refs.table && $refs.table.selection.length === 0"
          class="filter-item"
          type="warning"
          size="mini"
          @click="exportChecked"
        >导出（勾选）</el-button>
      </div>
    </div>
    <!--表格渲染-->
    <el-table v-loading="loading" ref="table" :data="data" :fit="true" stripe size="small">
      <el-table-column type="selection"/>
      <el-table-column prop="phone" min-width="120px" label="手机号码"/>
      <el-table-column prop="nickname" min-width="120px" label="微信昵称"/>
      <el-table-column prop="user_name" label="姓名"/>
      <el-table-column prop="recommend_name" min-width="120px" label="所属推广员"/>
      <el-table-column min-width="120px" label="所属推广员等级">
        <template slot-scope="scope">
          <span v-if="scope.row.recommend_member_type == 0">客户</span>
          <span v-if="scope.row.recommend_member_type == 1">推广员</span>
          <span v-else-if="scope.row.recommend_member_type == 2">团长</span>
          <span v-else-if="scope.row.recommend_member_type == 3">省长</span>
        </template>
      </el-table-column>
      <el-table-column prop="order_no" min-width="120px" label="订单号"/>
      <el-table-column prop="commission" min-width="98px" label="自身收益" />
      <el-table-column prop="up_commission" min-width="120px" label="上级推广收益"/>
      <el-table-column prop="super_up_commission" min-width="130px" label="上上级推广收益"/>
      <el-table-column min-width="120px" label="订单时间">
        <template slot-scope="scope">
          <span>{{ formatCreateTime(scope.row.create_date) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span>{{ bankOrder[scope.row.state] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
      :total="total"
      :current-page="page + 1"
      background
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"/>
  </div>
</template>

<script>
import initData from '@/mixins/initData'
import { parseTime, parseDate, downLoadExcel } from '@/utils/index'
import { exportOrder } from '@/api/distributionStatistics'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import Config from '@/config'
import COMMEN from '@/utils/commen'
import timer from '@/api/mall/timer' // 时间对象

export default {
  name: 'OrderCommission',
  components: { Treeselect },
  mixins: [initData],
  data() {
    return {
      pickerOptions: timer,
      menus: [],
      company_show: true,
      queryOrderDate: [new Date().setHours(0, 0, 0, 0), new Date()],
      queryResultOption: Config.RESULT_TYPE,
      bankOrder: COMMEN.BANK_ORDER,
      loading: false,
      dialog: false,
      query: {
        keywords: '',
        time: '',
        order_no: ''
      },
      exportSearchLoading: false,
      exportCheckedLoading: false
    }
  },
  created() {
    if (this.company_id === 443 || this.company_id === 102) {
      this.company_show = false
    }
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    parseTime,
    created() {
      this.$nextTick(() => {
        this.init()
      })
    },
    formatMoney(row, column, cellValue, index) {
      return cellValue.toFixed(2)
    },
    countTotal(v1, v2, v3) {
      return v1 + v2 + v3
    },
    beforeInit() {
      this.url = '/report/order-list'
      this.addParams()
      return true
    },
    addParams() {
      const query = this.query
      const sort = 'up_commission,desc'
      this.params = { page: this.page, size: this.size, sort: sort }
      const time = query.time
      if (time !== '' && time !== undefined && time !== '' && time !== null) {
        this.params['create_date'] = time.join('~')
      }
      if (query.order_no) {
        this.params['order_no'] = query.order_no
      }
      if (query.keywords) {
        this.params['keywords'] = query.keywords
      }
    },
    formatOrderTime(timeStamp) {
      const orderTime = new Date(Number(timeStamp))
      return parseDate(orderTime, true)
    },
    formatMemberType(row, column, cellValue, index) {
      return cellValue === 0 ? '非店主' : cellValue === 1 ? '店主' : ''
    },
    formatResultState(row, column, cellValue, index) {
      if (cellValue === 0) {
        return '未结算'
      } else if (cellValue === 1) {
        return '已结算'
      } else {
        return ''
      }
    },
    formatCreateTime(timeStamp) {
      const creatTime = new Date(Number(timeStamp))
      return parseDate(creatTime, true)
    },
    reset() {
      this.query = {}
      this.queryOrderDate = [new Date().setHours(0, 0, 0, 0), new Date()]
      this.init()
    },
    getSelected() {
      const order_nos = []
      const selectArr = this.$refs.table.selection
      for (let i = 0; i < selectArr.length; i++) {
        order_nos.push(selectArr[i].order_no)
      }
      return order_nos
    },
    // 导出勾选
    exportChecked() {
      this.exportCheckedLoading = true
      const order_nos = this.getSelected()
      this.params = { order_nos: order_nos.join(',') }
      exportOrder(this.params).then((res) => {
        downLoadExcel(res, '订单佣金记录.xls')
        this.exportCheckedLoading = false
      }).catch(err => {
        console.log(err)
        this.exportCheckedLoading = false
      })
    },
    // 导出查询
    exportSearch() {
      this.exportSearchLoading = true
      this.addParams()
      exportOrder(this.params).then((res) => {
        downLoadExcel(res, '订单佣金记录.xls')
        this.exportSearchLoading = false
      }).catch(err => {
        console.log(err)
        this.exportSearchLoading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
.tab-panel{
  padding-bottom: 2rem;
}
</style>
